<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="action"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <div v-else class="upImg">
        <img src="../../static/img/upImg.png" alt />
        <div class="upImg_tip">只能上传一张</div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="visible" width="30%" append-to-body>
      <img width="100%" :src="imageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
/*图片上传组件
  父组件通过 getImgSrc 函数,获取图片路径
  options: {组件配置项
      type: 'picture-card',//文件列表的类型,可选值 text /picture /picture-card,默认text
      limit: 3,//number,最大允许上传个数,默认3张
      multiple: true,//boolean值,是否支持多选文件,默认false
      headers: {},//object类型,设置上传的请求头部
      data: {},//object类型,上传时附带的额外参数
      show: true,//boolean值,是否显示已上传文件列表,默认true
      disabled: false,//boolean值,是否禁用,默认false
      autoUpload: true,//boolean值,是否在选取文件后立即进行上传,默认true
      tip: "只能上传jpg/jpeg/png文件，且不超过2M",//	提示说明文字
  }
  action 上传的地址,字符串,必填*/
const Address = require("../utils/url");
export default {
  name: "UploadImg",
  props: {
    options: {
      //配置可选项
      type: Object,
      required: false,
    },
    action: {
      //上传的地址
      type: String,
      default: Address.UPLOAD_IMG, //默认值
      required: false,
    },
    imageUrl: {
      type: String,
      default: "", //默认值
      required: true,
    },
  },
  data() {
    return {
      accept: "image/jpg,image/jpeg,image/png",
      visible: false,
      image: "",
    };
  },
  created() {},
  methods: {
    clear() {
      this.image = "";
    },
    //删除文件之前的钩子
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },
    //文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // this.$emit("getImgSrc", file);
    },
    //点击文件列表中已上传的文件时的钩子 response
    handlePreview(file) {
      this.image = file.response ? file.response.data.src : file.url;
      this.visible = true;
    },
    //文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$notify.info({
        title: "警告",
        message: `最多只能上传${this.options.limit}张.`,
        type: "warning",
      });
    },
    //上传成功后的钩子
    handleAvatarSuccess(res, file, fileList) {
      console.log(file.response.data.src);
      if (res.code === 0) {
        this.image = file.response.data.src;
        this.$emit("getImgSrc", file.response.data.src);
      } else {
        this.$notify.error({
          title: "上传失败",
          message: res.msg,
          type: "warning",
        });
      }
    },
    //上传文件之前的钩子
    beforeAvatarUpload(file) {
      const isPNG = file.type === "image/png";
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isJPEG && !isPNG) {
        this.$notify.info({
          title: "警告",
          message: "图片只能是 JPG/JPEG/PNG 格式!",
          type: "warning",
        });
        return false;
      }
      if (!isLt2M) {
        this.$notify.info({
          title: "警告",
          message: "图片大小不能超过 2MB!",
          type: "warning",
        });
        return false;
      }
    },
    //对图片尺寸进行限制
    imposeSize() {
      const width = 220;
      const height = 220;
      return (isSize = new Promise((resolve, reject) => {
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.onload = function () {
          let valid = img.width === width && img.height === height;
          valid ? resolve() : reject();
        };
        img.src = _URL.createObjectURL(res);
      }).then(
        () => {
          return res;
        },
        () => {
          this.$notify.info({
            title: "警告",
            message: `上传的图片必须是等于或大于${width}*${height}!`,
            type: "warning",
          });
          return Promise.reject();
        }
      ));
    },
    //上传图片
    submitUpload() {
      if (this.options && !this.options.autoUpload) {
        this.$refs.upload.submit();
      }
    },
    //回显图片
  },
  watch: {},
};
</script>

<style scoped>
.upImg {
  width: 175px;
  height: 175px;
  border: 2px solid rgba(238, 238, 238, 1);
  opacity: 1;
  border-radius: 10px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(238, 238, 238, 1);
  position: relative;
  top: 15px;
}
.upImg img {
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.upImg_tip {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 75%;
  transform: translateY(-50%);
}
.el-upload--picture-card {
  background-color: #fff !important;
  border: none !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 175px;
  height: 175px;
  margin-top: 20px;
  display: block;
}
</style>
